<template>
<div>
    <el-form ref="form" label-width="80px">
        <el-form-item label="SPU名称">{{ skuInfo.skuName }}
        </el-form-item>

        <el-form-item label="SKU名称">
            <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
        </el-form-item>

        <el-form-item label="价格(元)">
            <el-input placeholder="价格(元)" v-model="skuInfo.price" type="number"></el-input>
        </el-form-item>

        <el-form-item label="重量(KG)">
            <el-input placeholder="重量(KG)" v-model="skuInfo.weight"></el-input>
        </el-form-item>

        <el-form-item label="规格描述">
            <el-input type="textarea" row="4" v-model="skuInfo.skuDesc" placeholder="规格描述"></el-input>
        </el-form-item>

        <el-form-item label="平台属性">
            <el-form :inline="true" ref="form" label-width="80px">
                <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
                    <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
                        <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="销售属性">
            <el-form :inline="true" ref="form" label-width="80px">
                <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
                    <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
                        <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="图片列表">
            <el-table style="width:100%" border :data="spuImageList" @select-change="handleSelectionChange">
                <el-table-column type="selection" prop="prop" width="80px"></el-table-column>
                <el-table-column prop="index" label="图片" width="width">
                    <template slot-scope="{row,$index}">
                        <img :src="row.imgUrl" style="width:100px;height:100px"></img>
                    </template>
                </el-table-column>
                <el-table-column prop="imgName" label="名称" width="width"></el-table-column>
                <el-table-column prop="" label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设置默认</el-button>
                        <el-button v-else>默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="" @click="cancel">取消</el-button>
        </el-form-item>

    </el-form>
</div>
</template>

<script>
export default {
    name:"",
    data(){
        return{
            // 存储图片的信息
            spuImageList:[],
            // 存储销售属性的信息
            spuSaleAttrList:[],
            // 存储平台属性的信息
            attrInfoList:[],
            //收集sku字段
            skuInfo:{
                // 第一类：收集的数据是父组件给的
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                // 第二类：需要通过数据双向绑定v-model收集
                skuName: "",
                weight: 0,
                price: 0,
                skuDesc: "",
                // 第三类：自己书写代码
                // 默认图片
                skuDefaultImg: "",
                // 收集图片字段
                skuImageList: [
                    // {
                    // id: 0,
                    // imgName: "string",
                    // imgUrl: "string",
                    // isDefault: "string",
                    // skuId: 0,
                    // spuImgId: 0
                    // }
                ],
                // 平台属性
                skuAttrValueList: [
                    // {
                    // attrId: 0,
                    // attrName: "string",
                    // id: 0,
                    // skuId: 0,
                    // valueId: 0,
                    // valueName: "string"
                    // }
                ],
                // 收集销售属性列表的数据
                skuSaleAttrValueList: [
                    // {
                    // id: 0,
                    // saleAttrId: 0,
                    // saleAttrName: "string",
                    // saleAttrValueId: 0,
                    // saleAttrValueName: "string",
                    // skuId: 0,
                    // spuId: 0
                    // }
                ],
            },
            //
            spu:{},
            // 收集图片的数据
            imageList:[],
            
        }
    },
    methods:{
        // 获取skuForm数据  兄弟们听我说，
        async getData(category1Id,category2Id,spu){
            console.log(spu)
            // 收集父组件给予的数据
            this.skuInfo.category3Id = spu.category3Id;
            this.skuInfo.spuId = spu.id;
            this.skuInfo.tmId = spu.tmId;
            this.skuInfo.skuName = spu.spuName;

            // 获取图片的数据
            let result1 = await this.$API.spu.reqSpuImageList(spu.id);
            if (result1.code==200){
                // this.spuImageList = result1.data;
                let list = result1.data;
                list.forEach(item=>{
                    item.isDefault = 0;
                });
                this.spuImageList = list;
            }
            // 获取销售属性的数据
            let result2 = await this.$API.spu.reqSaleAttrList(spu.id);
            if (result2.code==200){
                this.spuSaleAttrList = result2.data;
            }
            // 获取平台属性的数据
            let result3 = await this.$API.spu.reqAttrInfoList(category1Id,category2Id,spu.category3Id);
            if (result3.code==200){
                this.attrInfoList = result3.data;
            }
        },
        // table 复选框按钮的事件
        handleSelectionChange(params){
            // 获取到用户选中图片的信息数据，需要注意的是，当前收集的数据中缺少isDefault字段
            this.imageList = params;
        },
        // 排它的操作
        changeDefault(row){
            // 图片列表的数据isDefault字段为0
            this.spuImageList.forEach(item=>{
                item.isDefault = 0;
            });
            // 点击的那个图片的数据变为1
            row.isDefault = 1;
            // 收集默认图片的地址
            this.skuInfo.skuDefaultImg = row.imgUrl;
        },
        // 取消切换场景
        cancel(){
            // 自定义事件
            this.$emit('changeScenes',0);
            // 清空数据
            Object.assign(this._data,this.$options.data());
            // Object.assign(this._data, this.$options.data.call(this))

        },
        // 保存
        async save(){
            // 整理参数
            // 整理平台属性
            const {skuInfo,attrInfoList,spuSaleAttrList,imageList} = this;
            /*--------------------------------
            // 整理平台属性的方式一、
            // 新建数组
            let arr = []
            // 把收集到的属性进行整理
            attrInfoList.forEach(item=>{
                // 当前平台属性影虎进行选择
                if (item.attridAndValueId){
                    const [attrId,valueId] = item.attrIdAndValue.split(":");
                    // 携带给服务器参数应该是对象
                    let obj = {value,attrId};
                    arr.push(obj);
                }
            });
            // 将整理好的参数赋值给skuInfo.skuAttrValueList
            skuInfo.skuAttrValueList = arr;
            ----------------------------------*/
            // 整理平台属性的数据  方式二、
            skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
                if (item.attrIdAndValueId){
                    const [attrId,valueId] = item.attrIdAndValueId.split(":");
                    prev.push({attrId,valueId});
                }
                return prev;
            },[]);
            
            // 整理销售属性
            skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev,item)=>{
                if (item.attrIdAndValueId){
                    const [saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(":");
                    prev.push({saleAttrId,saleAttrValueId});
                }
                return prev;
            },[]);
            
            // 整理图片的数据
            skuInfo.skuImageList = imageList.map(item=>{
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id,
                }
            });
            
            // 发送请求
            let result = await this.$API.spu.reqAddSku(skuInfo);
            if (result.code==200){
                this.$message({type:"success",message:"添加SKU成功"});
                this.$emit("changeScenes",0);
            }
            
        }
    },
};
</script>

<style>

</style>